<template>
  <div class="change-suspension-state">
    <Row>
      <table border="1">
        <tbody>
          <tr>
            <td class="tbtitle">备注/意见：</td>
            <td>
              <textarea
                v-model.trim="form.changeReason"
                :placeholder="$t('module.launchApp.inputChangeReason')"
              />
            </td>
          </tr>

          <tr>
            <td class="tbtitle">常用语&nbsp;</td>
            <td>
              <span class="btn" @click="inputReason(
                processInstanceInfo.suspensionState === 1 ? $t('module.launchApp.suspend') : $t('module.launchApp.active')
              )">
                {{processInstanceInfo.suspensionState === 1 ? $t('module.launchApp.suspend') : $t('module.launchApp.active')}}
              </span>

              <span class="btn" @click="inputReason(
                processInstanceInfo.suspensionState === 1 ? '流程暂停审批，后续再激活！' : '流程继续进行，恢复正常！'
              )">
                {{processInstanceInfo.suspensionState === 1 ? '流程暂停审批，后续再激活！' : '流程继续进行，恢复正常！'}}
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </Row>
  </div>
</template>

<script>
import { activateProcessInstance, suspendProcessInstance } from '@api/flowable/processManagement.js'

export default {
  props: {
    processInstanceInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        changeReason: ''
      },
      actions: [
        {
          text: this.$t('common.confirm'),
          theme: 'primary',
          handle: () => {
            if (!this.form.changeReason) {
              return this.warning(this.$t('module.launchApp.changeReasonWarning'))
            }
            this.changeStatus(this.processInstanceInfo)
          },
          loading: false
        },
        {
          text: this.$t('common.close'),
          theme: 'primary',
          handle: () => this.$emit('Close')
        }
      ]
    }
  },
  created() {
    this.$emit('SetTitle', this.$t('module.launchApp.changeSuspensionStatePageTitle'))
    this.$emit('SetPageActions', this.actions)
  },
  methods:{
    changeStatus(row) {
      if (row.suspensionState === 1) {
      // 如果是正常状态，则执行挂起操作
        suspendProcessInstance({
          deleteReason: this.form.changeReason,
          processInstanceId: row.id
        }).then(res => {
          this.success(this.$t('module.launchApp.suspendSuccess'))
          this.form.changeReason = ''
          this.$emit('Close', res)
        }).catch(err => {
          this.warning(this.$t('module.launchApp.suspendFail'))
        })
      } else if(row.suspensionState === 2) {
      // 如果是挂起状态，则执行激活操作
        activateProcessInstance({
          deleteReason: this.form.changeReason,
          processInstanceId: row.id
        }).then(res => {
          this.success(this.$t('module.launchApp.activeSuccesss'))
          this.form.changeReason = ''
          this.$emit('Close', res)
        }).catch(err =>
          this.warning(this.$t('module.launchApp.activeFail'))
        )
      } else {
        return
      }
    },
    warning(str, time) {
      this.$Message.warning({
        content: str.toString(),
        duration: time || 2
      })
    },
    success(str, time) {
      this.$Message.success({
        content: str.toString(),
        duration: time || 2
      })
    },
    inputReason(reason) {
      this.form.changeReason = ''
      this.form.changeReason = reason
    }
  }
}
</script>

<style lang="less">
.change-suspension-state {
  textarea {
    width: 100%;
    border: 1px solid #c5c8ce;
    resize: vertical;
    height: 106px;
    outline: none;
    padding: 10px;
    font-size: 14px;
  }

  table {
    border: 1px solid #c5c8ce;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    .tbtitle {
      color: #333;
      text-align: right;
      font-size: 14px;
      background: #f3f3f3;
      font-weight: 500;
      width: 20%;
    }
    tr td:last-child {
      padding: 5px;
    }
  }

  .btn {
    display: inline-block;
    border: 1px solid transparent;
    border-color: #2d8cf0;
    height: 34px;
    border-radius: 4px;
    color: #2d8cf0;
    padding: 6px 12px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    vertical-align: middle;
    font-weight: 500;
    &:hover {
      background-color: #2d8cf0;
      color: #fff;
    }
  }
}
</style>
